<template>
  <div>
    <el-row>
      <el-col :span="12" style="text-align:left">
        <span style="font-family:Microsoft;font-size: 15px;font-weight: bold;">银行账户信息</span>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-dropdown @command="handleCommand">
          <span><i class="joys-icon-fusionmenu"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">新增</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row v-if="this.data.length==0" style="text-align: center">
      没有数据
    </el-row>
    <el-table :data="data" v-if="this.data.length>0">
      <el-table-column label="银行账号" width="250" align="left">
        <template slot-scope="scope">
          <span v-if="!scope.row.editable">{{scope.row.accountCode}}</span>
          <ft-input v-if="scope.row.editable" :editable="scope.row.editable" v-model="scope.row.accountCode"></ft-input>
        </template>
      </el-table-column>
      <el-table-column label="账户名称" align="left">
        <template slot-scope="scope">
          <span v-if="!scope.row.editable">{{scope.row.accountName}}</span>
          <ft-input v-if="scope.row.editable" :editable="scope.row.editable" v-model="scope.row.accountName"></ft-input>
        </template>
      </el-table-column>
      <el-table-column label="开户银行" align="left">
        <template slot-scope="scope">
          <ft-input :editable="scope.row.editable" v-model="scope.row.accountBank"></ft-input>
        </template>
      </el-table-column>
      <el-table-column label="账户性质" align="left">
        <template slot-scope="scope">
          <ft-radio-group v-model="scope.row.accountProperty" service-name="joys-master-data" type-name="accountProperty"
                          :editable="scope.row.editable"></ft-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="账户类型" align="left">
        <template slot-scope="scope">
          <ft-enum-select v-model="scope.row.accountType" service-name="joys-master-data" type-name="accountType"
                          :editing="scope.row.editable"></ft-enum-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button slot="reference" type="text" v-if="scope.row.editable" size="small"
                     @click="save(scope.$index,scope.row)">保存
          </el-button>
          <el-button slot="reference" type="text" v-if="scope.row.editable" size="small"
                     @click="cancel(scope.$index,scope.row)">取消
          </el-button>
          <el-button slot="reference" type="text" v-if="!scope.row.editable" size="small"
                     @click="edit(scope.$index, scope.row)">编辑
          </el-button>
          <el-popover v-if="!scope.row.editable"
                      placement="top"
                      width="160"
                      v-model="scope.row.delVisible">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
              <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import FtRadioGroup from "./FtRadioGroup";

  export default {
    name: "OrgBank",
    components: {FtRadioGroup},
    props: ['orgId'],
    data() {
      return {
        editable: false,
        data: [],
        form: {}
      }
    },
    mounted() {
      this.load()
    },
    methods: {
      handleCommand(value) {
        this.data.push({editable: true})
      },
      cancel(index, value) {
        if (value.bankAccountId) {
          this.$http.get('/joys-rest/joys-master-data/bank/' + value.bankAccountId).then(resp => {
            resp.body.editable = false
            this.$set(this.data, index, resp.body)
          }, resp => {
            this.$message.error(resp.body.message)
          })
        } else {
          this.data.splice(index, 1)
        }
      },
      edit(index, value) {
        value.editable = true
        this.$set(this.data, index, value)
      },
      save(index, value) {
        value.sourceBillType = 'ORG_BANK'
        value.sourceBillId = this.orgId
        this.$http.post('/joys-rest/joys-master-data/bank/save', value).then(resp => {
          resp.body.editable = false
          this.$set(this.data, index, resp.body)
          this.$message.success('操作成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      load() {
        if (this.orgId) {
          this.data = []
          this.$http.get('/joys-rest/joys-master-data/bank/querys/' + this.orgId).then(resp => {
            this.data = resp.body
            this.data.forEach((item, index) => {
              item.editable = false
            })
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      handleDelete(index,value){
        this.$http.delete('/joys-rest/joys-master-data/bank/' + value.bankAccountId + "/" + value.dataVersion).then(resp => {
          this.data.splice(index, 1)
          this.$message.success('删除成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      }
    },
    watch: {
      orgId() {
        this.load()
      }
    }
  }
</script>

<style scoped>

</style>
